export default {
    mounted(el) {
        // 设置目标元素基础属性
        el.style.cursor = 'move';
        el.style.position = 'fixed';
      
        // 监听鼠标在目标元素上按下        
        el.addEventListener('mousedown', (e) => {
            let { width, height } = el.getBoundingClientRect(el);
            // 当前目标元素的left与top
            const left = el.offsetLeft;
            const top = el.offsetTop;
            // 保存按下的鼠标的X与Y
            const mouseX = e.clientX;
            const mouseY = e.clientY;
    
            // 监听鼠标移动
            document.onmousemove = (e) => {
                // 鼠标移动的距离
                let disX = e.clientX - mouseX;
                let disY = e.clientY - mouseY;
        
                el.style.left = (left + disX) + 'px';
                el.style.top = (top + disY) + 'px';
                return false // 防止选中文本，文本拖动的问题
            }
            
            // 监听鼠标抬起
            document.onmouseup = () => {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        });
    }
}